<template>
  <el-dialog title="业务招待费明细" width="70%" top="5vh" center :close-on-click-modal="false" :visible.sync="CanFeiMingXiShow" @closed="resetForm">
    <el-row :span="24">
      <el-col v-for="(item, index) in personnelS" :key="index" :span="24">
        <el-form ref="editFrom" :model="item" :rules="rules" label-position="right" label-width="120px">
          <el-row :span="24">
            <el-col :span="24">
              <!-- <h2 > -->
              <div class="title">
                <div class="leftTitlee">
                  <span>{{ index + 1 }}</span> <span>{{ item.yongTu }}</span> 花费金额<span>{{ item.money }}</span>
                </div>
                <el-form-item label="是否公司内部:" prop="active">
                  <el-switch v-model="item.active" active-text="是" inactive-text="否"> </el-switch>
                </el-form-item>
              </div>
              <!-- </h2> -->
            </el-col>
          </el-row>
          <el-row v-show="!item.active" :span="24">
            <el-col :span="10">
              <el-form-item label="客户单位名称:" :prop="item.active === false ? 'dangWeiName' : ''">
                <el-input v-model="item.dangWeiName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :offset="4" :span="7">
              <el-form-item label="客户人数:" :prop="item.active === false ? 'keHuRS' : ''">
                <el-input v-model="item.keHuRS"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="!item.active" :span="24">
            <el-col :span="14">
              <el-form-item label="陪同人员姓名:" :prop="item.active === false ? 'peiTongRY' : ''">
                <el-select v-model="item.peiTongRY" style="width:100%" multiple filterable allow-create default-first-option placeholder="请输入陪同人员姓名">
                  <el-option v-for="(item1, index1) in options" :key="index1" :label="item1.label" :value="item1.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="日期:" :prop="item.active === false ? 'time' : ''">
                <el-date-picker v-model="item.time" style="width:auto" format="yyyy-mm-dd" type="date" placeholder="选择日期"> </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="!item.active" :span="24">
            <el-col :span="24">
              <el-form-item label="结账清单">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :limit="3"
                  :on-exceed="chaochu"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog append-to-body :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button size="small" type="success">保存</el-button>
            <el-button size="small" type="warning" @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      value1: true,
      dialogImageUrl: '',
      dialogVisible: false,
      options: [],
      personnelS: [
        { money: 200, time: '', yongTu: '内部聚餐', dangWeiName: '汇丰', keHuRS: 7, peiTongRY: ['张三', '李四'], active: false }
        // { money: 2010, time: '',   yongTu: '吃饭', dangWeiName: '汇丰', keHuRS: 16, peiTongRY: ['张三', '李四'], active: true }
      ],
      CanFeiMingXiShow: true,
      rules: {
        time: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        dangWeiName: [{ required: true, message: '请输入客户单位名称', trigger: 'blur' }],
        keHuRS: [{ required: true, message: '请输入客户人数', trigger: 'blur' }],
        peiTongRY: [{ required: true, message: '请输入客户人数', trigger: 'change', type: 'array' }]
      }
    }
  },
  created() {},
  methods: {
    close() {
      this.CanFeiMingXiShow = false
    },
    openCanfeiMXShow() {
      this.CanFeiMingXiShow = true
    },
    submitForm() {
      this.$refs.editFrom.validate(valid => {
        // let that = this
        if (valid) {
          console.log('is Ok')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    removepeiTongRY(row, Rowindex, index) {
      row.peiTongRY.splice(index, 1)
    },
    resetForm() {
      // this.$refs.editFrom.resetFields()
      this.CanFeiMingXiShow = false
    },
    shanchu(row, index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.personnelS.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    chaochu(files, fileList) {
      console.log(files, fileList)
      this.$message({
        message: '超出先定个数，请删除之后再上传',
        type: 'warning'
      })
    },
    beforeRemove(file, fileList) {
      console.log(file)
      console.log(fileList)
      // return this.$confirm(`确定移除 ${file.name}？`)
    },
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, '')
      // 选择需要添加的文件后缀
      if (['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为jpg、png的附件！'
        })
        return false
      }
      // 控制上传文件大小
      if (file.size / 1024 > 500) {
        this.$message({
          message: '上传文件大小不能超过500k!',
          type: 'error'
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  .leftTitlee {
    font-size: 1.5em;
    font-weight: bold;
  }
}
.cell {
  ::v-deep div.el-upload--picture-card {
    display: none;
    height: auto !important;
    line-height: auto !important;
  }
  .peitong {
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style scoped>
.cell >>> div.el-upload--picture-card {
  display: none;
  height: auto !important;
  line-height: auto !important;
}
</style>
